<!--承运商物流总量-->
<style src="@/style/core/board.less" lang="less" scoped></style>
<template>
  <div class="contain">
    <div class="board-tab displayflex mb10">
      <dl class="flex1 board-dl">
        <dt class="iconfont icon-logistics-owner"></dt>
        <dd>货主物流总量</dd>
      </dl>
      <dl class="flex1 board-dl cur">
        <dt class="iconfont icon-logistics-carrier"></dt>
        <dd>承运商物流总量</dd>
      </dl>
    </div>
    <div class="displayflex board-peo mb10">
      <div class="flex1 label">会员总数<em class="num"> {{allMsg.TenantCount}} </em>名</div>
      <div class="bp-sele"><i class="iconfont icon-logistics-date"></i>按时间段</div>
      <div class="bp-sele cur" @click="popupVisible=true"><i class="iconfont icon-salesmen"></i>传世会员</div>
    </div>
    <!-- <div class="displayflex board-role mb10">
      <div class="label">
        <p>配送商</p>
        <p>货主</p>
      </div>
      <div class="flex1 br-list">
        <ul class="br-ul cf">     
          <li class="cur">全部 4</li>
          <li>自配</li>
          <li>泰康</li>
          <li>城市映急</li>
          <li>华欣</li>
        </ul>
        <ul class="br-ul cf">     
          <li class="cur">全部 3</li>
          <li>辉瑞</li>
          <li>中美史克</li>
          <li>葛兰素史克</li>
        </ul>
      </div>
    </div> -->

    <div class="form-wrap mb10">
      <div class="form-choice line">
        <popup-picker title="配送商" :data="goodType.list" :columns="3" v-model="goodType.value" placeholder="全部" value-text-align="right" :show-name="goodType.show" @on-change="getDate"></popup-picker>
      </div>
      <div class="form-choice">
        <popup-picker title="货主" :data="conType.list" :columns="3" v-model="conType.value" placeholder="全部" value-text-align="right" :show-name="conType.show" @on-change="getDate"></popup-picker>
      </div>
    </div>

    <div class="displayflex board-cir mb10">
      <div class="flex1 bc-ctx">
        <p class="tit">已接订单</p>
        <div class="total"><em>{{carDate.TransitBillQty+carDate.ReachBillQty}}</em>张</div>
        <div class="displayflex bc-detail">
          <div class="flex1 bc-lft bc-num">
            <p>在途订单</p>
            <div class="num"><em class="yellow">{{carDate.TransitBillQty}}</em>张</div>
            <div class="num"><em class="yellow">{{carDate.TransitBillQty/(carDate.TransitBillQty+carDate.ReachBillQty) * 100 | fmoney }}</em>%</div>
          </div>
          <div class="flex1 bc-rit bc-num">
            <p>到达订单</p>
            <div class="num"><em class="board-blue">{{carDate.ReachBillQty}}</em>张</div>
            <div class="num"><em class="board-blue">{{carDate.ReachBillQty/(carDate.TransitBillQty+carDate.ReachBillQty) * 100 | fmoney }}</em>%</div>
          </div>
        </div>
        <div class="echart-box">
          <div class="echart-line"></div>
          <div class="echart-line-rit"></div>
          <div id="echarts1" class="echart1"></div>
        </div>
      </div>
      <div class="flex1 bc-ctx">
        <p class="tit">总货量</p>
        <div class="total"><em>{{carDate.TransitPkgQty+carDate.ReachPkgQty}}</em>张</div>
        <div class="displayflex bc-detail">
          <div class="flex1 bc-lft bc-num">
            <p>在途货量</p>
            <div class="num"><em class="yellow">{{carDate.TransitPkgQty}}</em>件</div>
            <div class="num"><em class="yellow">{{carDate.TransitPkgQty/(carDate.TransitPkgQty+carDate.ReachPkgQty) * 100 | fmoney }}</em>%</div>
          </div>
          <div class="flex1 bc-rit bc-num">
            <p>到达货量</p>
            <div class="num"><em class="board-blue">{{carDate.ReachPkgQty}}</em>件</div>
            <div class="num"><em class="board-blue">{{carDate.ReachPkgQty/(carDate.TransitPkgQty+carDate.ReachPkgQty) * 100 | fmoney }}</em>%</div>
          </div>
        </div>
        <div class="echart-box">
          <div class="echart-line"></div>
          <div class="echart-line-rit"></div>
          <div id="echarts2" class="echart1"></div>
        </div>
      </div>
      <div class="flex1 bc-ctx">
        <p class="tit">客户数</p>
        <div class="total"><em>1000</em>家</div>
        <div class="displayflex bc-detail">
          <div class="flex1 bc-lft bc-num">
            <p>在途客户</p>
            <div class="num"><em class="yellow">7000</em>家</div>
            <div class="num"><em class="yellow">75</em>%</div>
          </div>
          <div class="flex1 bc-rit bc-num">
            <p>到达客户</p>
            <div class="num"><em class="board-blue">7000</em>张</div>
            <div class="num"><em class="board-blue">75</em>%</div>
          </div>
        </div>
        <div class="echart-box">
          <div class="echart-line"></div>
          <div class="echart-line-rit"></div>
          <div id="echarts3" class="echart1"></div>
        </div>
      </div>
    </div>
    <div class="board-car mb10">
      <h2 class="tit">配送在途车辆<em> {{allMsg.DriverTotal}} </em>辆</h2>
      <div class="bc-total-box">
        <ul class="displayflex bc-total line-blue">
          <li class="flex1"><i class="iconfont icon-date"></i>期内</li>
          <li class="flex1">单数<em>{{carDate.NormalBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{carDate.NormalPkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-blue">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{carDate.NormalBillQty/(carDate.NormalBillQty+carDate.NormalPkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
        <ul class="displayflex bc-total line-red">
          <li class="flex1"><i class="iconfont icon-date"></i>超期</li>
          <li class="flex1">单数<em>{{carDate.OverTimeBillQty}}</em>张</li>
          <li class="flex1">货量<em>{{carDate.OverTimePkgQty}}</em>件</li>
        </ul>
        <ul class="displayflex bc-total line-red">
          <li class="flex1 hidenum">1</li>
          <li class="flex1 hidenum">1</li>
          <li class="flex1">占比<em>{{carDate.OverTimePkgQty/(carDate.OverTimePkgQty+carDate.NormalPkgQty) * 100 | fmoney }}</em>%</li>
        </ul>
      </div>
    </div>
    <div class="board-city">
      <div class="bc-iframe">
        <iframe src="echartmap.html" class="bc-iframe"></iframe>
      </div>
      <div class="bc-table">
        <ul class="bc-table-row head">
          <li>城市</li>
          <li>客户数</li>
          <li>地址数</li>
        </ul>
        <template v-for="item in CityLogistics">
        <ul class="bc-table-row">
          <li>{{item.CityName }}</li>
          <li>{{item.BRUQty}}</li>
          <li>{{item.AddressQty}}</li>
        </ul>
        </template>
      </div>
    </div>
    <!-- 传世会员 -->
    <mt-popup
      v-model="popupVisible"
      @click="popupVisible = false;"
      position="right" class="bill-popup">
      <ul class="bill-type">
        <template v-for="item in allMsg.TenantInfo">
          <li @click="checkBill(item.Guid)">{{item.ChineseName}}</li>
        </template>
      </ul>
    </mt-popup>
    <manage-footer></manage-footer>
  </div>
</template>

<script>
import manageFooter from '@/components/core/footer/manage.footer.vue';
import echarts from '$static/echarts/echarts.common.min.js';
import {
    iosProvinces,
    iosCitys,
    iosCountys
} from "@/components/share/area/areaData_v2.js";
export default {
  name:'carrier',
  components: {
    manageFooter
  },
  data() {
    return {
      popupVisible:false,
      goodType:{
        list:[],
        value:[],
        show:true
      },
      conType:{
        list:[],
        value:[],
        show:true
      },
      allMsg:'',
      TenantGuid:'',
      carDate:'',
      CityLogistics:[],
    }
  },
  created(){
    this.getDate();
  },
  watch: {
    
  },
  mounted() {
    this.$nextTick(function() {
      
    })
  },
  methods: {
    getDate(){
      var userinfo = JSON.parse(localStorage.userinfo);
      var query = {
        TenantGuid:this.TenantGuid,
        SummaryMonth:'',
        DeliverGUID:this.goodType.value[0] || '',
        CargoOwnerGuid:this.conType.value[0] || ''
      };
      var self = this;
      this.Ajax.post('SearchCarrlogisticsTotalApi', query).then(function(resp) {
    
        self.allMsg = resp.Data;
       
        self.carDate = self.allMsg.BillStateInfo[0];
        var MFCargoOwner = self.allMsg.MFCargoOwner;
        var MFTPCarrier = self.allMsg.MFTPCarrier;
        self.CityLogistics = resp.Data.CityLogistics;
        var CityLogistics = self.allMsg.CityLogistics;
        var CityLogisticsNew=[];
        CityLogistics.forEach(function(element) {
           if(
                iosCitys.find(i => i.id == element.CityName) != null &&
                iosCitys.find(i => i.id == element.CityName) != "undefined"
            ){
                var addresss = iosCitys.find(i => i.id == element.CityName).value;
                  element.CityName= addresss;
                  CityLogisticsNew.push(element);
            }
        
        }, this);
        MFTPCarrier.forEach(function(element) {
           var ll = {
              name: element.ChineseName,
              value: element.Guid,
            };
         self.goodType.list.push(ll);
        }, this);
        MFCargoOwner.forEach(function(element) {
           var ll = {
              name: element.ChineseName,
              value: element.Guid,
            };
         self.conType.list.push(ll);
        }, this);
        self.getBill();
        sessionStorage.CityLogistics = JSON.stringify(CityLogisticsNew);
      })
    },
    checkBill(value){
      this.popupVisible = false;
      this.TenantGuid = value;
      this.getDate();
    },
    getBill(){
      var self = this;
      var option1 = {
          series : [
              {
                  type:'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  data:[
                      {value:self.carDate.ReachBillQty, name:'到达订单'},
                      {value:self.carDate.TransitBillQty, name:'在途订单'}
                  ],
                  label: {
                    normal: {
                      show: false
                    }
                  }
              }
          ],
          color: ["#649fa3", "#f6d28b"]
      };
      var option2 = {
          series : [
              {
                  type:'pie',
                  radius:'70%',
                  avoidLabelOverlap: false,
                  data:[
                      {value:self.carDate.ReachPkgQty, name:'到达货量'},
                      {value:self.carDate.TransitPkgQty, name:'在途货量'}
                  ],
                  label: {
                    normal: {
                      show: false
                    }
                  }
              }
          ],
          color: ["#649fa3", "#f6d28b"]
      };
      var option3 = {
          series : [
              {
                  type:'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  data:[
                      {value:1500, name:'到达客户'},
                      {value:2500, name:'在途客户'}
                  ],
                  label: {
                    normal: {
                      show: false
                    }
                  }
              }
          ],
          color: ["#649fa3", "#f6d28b"]
      };
      var myChart1 = echarts.init(document.getElementById('echarts1'))
      myChart1.setOption(option1);
      var myChart2 = echarts.init(document.getElementById('echarts2'))
      myChart2.setOption(option2);
      var myChart3 = echarts.init(document.getElementById('echarts3'))
      myChart3.setOption(option3);
    },
  }
}
</script>
